<template>
	<view class="content">
		<view class="title-box">
			<view class="title">您好，</view>
			<view class="info">欢迎使用特检资料</view>
		</view>
		<view class="box">
			<button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" v-show="isAgree">手机号一键登录</button>
			<button type="default" v-show="!isAgree" @click="handleBtn">手机号一键登录</button>
		</view>
		<view class="agree">
			<u-checkbox-group >
				<u-checkbox v-model="isAgree" shape="circle" @change="changeAgree"></u-checkbox>
				<view>我已阅读并同意<text @click="handlePrivacyAgreement">隐私协议</text>、<text @click="handleUserAgreement">用户协议</text></view>
			</u-checkbox-group>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAgree: false
			}
		},
		methods: {
			handleUserAgreement(){
				uni.navigateTo({
					url:'/pages/login/userAgreement'
				})
			},
			handlePrivacyAgreement(){
				uni.navigateTo({
					url:'/pages/login/privacyAgreement'
				})
			},
			changeAgree(data){
				this.isAgree=data
			},
			handleBtn(){
				if(!this.isAgree){
					uni.showToast({
						title:'请阅读并同意隐私协议、用户协议',
						icon:'none'
					})
					return
				}
			},
			async decryptPhoneNumber(data) {
				console.log(data)
				
				const that = this
				await that.$store.dispatch('login')
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function(loginRes) {
						console.log(loginRes);
						data.detail.code = loginRes.code
						that.$store.dispatch('handleBindPhone',data.detail).then(res => {
							uni.showToast({
								title: '绑定成功'
							})
							setTimeout(() => {

								uni.switchTab({
									url: '/pages/index/index'
								})
							}, 1000)
						})

					}
				});

			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #fff;
		min-height: 100vh;
		padding-top: 200rpx;
		box-sizing: border-box;
		.agree{
			display: flex!important;
			color: #333;
			font-size: 26rpx;
			align-items: center!important;
			justify-content: center!important;
			margin-top: 40rpx;
			text{
				margin: 0 8rpx;
				color: #3b70ff;
			}
			
		}
		/deep/ .u-radio-group{
			align-items: center!important;
			justify-content: center!important;
		}


		.box {
			width: 85%;
			margin: 200rpx auto 0 auto;
		}

		button {
			background: #3b70ff !important;
			color: #fff !important;
			border: 1px solid #3b70ff;
		}

		.title-box {
			padding: 48rpx;
			box-sizing: border-box;
			color: #3b70ff;

			.title {
				font-size: 40rpx;
				font-weight: 800;
			}

			.info {
				margin-top: 24rpx;
				font-size: 36rpx;
			}
		}
	}
</style>